<template>
  <div class="home">
    <div class="content">
      <div class="header">
        <div class="location" is-link title="基础用法" @click="show = true">
          <van-icon name="location-o" />
          <span>当前地址... ></span>
        </div>
        <div class="text">外卖</div>
      </div>
      <div class="main">
        <div class="main-bg">
          <div class="search">
            <van-sticky>
              <van-search
                show-action
                shape="round"
                placeholder="请输入搜索关键词"
              >
                <template #action>
                  <div @click="onClickButton">搜索</div>
                </template>
              </van-search>
            </van-sticky>
            <van-config-provider :theme-vars="badgeVars">
              <div class="search_text">
                <div>9.9元猫砂</div>
                <div>周黑鸭</div>
                <div>奶茶</div>
                <div>麦当劳</div>
                <div>生日蛋糕</div>
                <div>螺蛳粉</div>
              </div>
            </van-config-provider>
          </div>
          <div class="classify">
            <div class="big_classify">
              <div v-for="(i, index) in big_classify" :key="index">
                <svg class="icon" aria-hidden="true">
                  <use :xlink:href="`#${i.icon}`"></use>
                </svg>
                {{ i.name }}
              </div>
            </div>
            <div class="small_classify">
              <div v-for="(i, index) in small_classify" :key="index">
                <svg class="icon" aria-hidden="true">
                  <use :xlink:href="`#${i.icon}`"></use>
                </svg>
                {{ i.name }}
              </div>
            </div>
          </div>
          <div class="notice">
            <van-notice-bar
              left-icon="smile"
              :scrollable="false"
              color="#ffc400"
              background="#ffffff"
              mode="link"
            >
              <van-swipe
                vertical
                class="notice-swipe"
                :autoplay="3000"
                :touchable="false"
                :show-indicators="false"
              >
                <van-swipe-item
                  >明月直入，<span>无心</span>可猜。</van-swipe-item
                >
                <van-swipe-item
                  >仙人抚<span>我顶</span>，结发受长生。</van-swipe-item
                >
                <van-swipe-item
                  >今人<span>不见古时月</span>，今月曾经照古人。</van-swipe-item
                >
              </van-swipe>
            </van-notice-bar>
          </div>        
           <div>
            <van-tabs class="tabs" animated>
              <van-tab v-for="(item) in centent_nav_list" :key="item.tab" :title="item.tab">
                <Store :store_list="item.data"/>
              </van-tab>
            </van-tabs>
           </div>
        </div>
      </div>
    </div>
    <van-action-sheet v-model:show="show">
      <van-area
        title="选择地址"
        :area-list="areaList"
        :columns-placeholder="['请选择', '请选择', '请选择']"
      />
    </van-action-sheet>
    <Footer></Footer>
  </div>
</template>

<script>
import { areaList } from "@vant/area-data";
import { reactive, toRefs, ref } from "vue";
import Footer from "../../components/footer.vue";
import Store from './Store/Store.vue'
export default {
  name: "Home",
  components: {
    Footer,Store
  },
  setup() {
    const show = ref(false);
    const badgeVars = reactive({
      badgeColor: "#00000",
      badgeBackgroundColor: "#eee",
    });
    let data = reactive({
      big_classify: [
        { name: "美食", icon: "icon-meishi1" },
        { name: "甜点饮品", icon: "icon-tiandianmianbaodangaoshuiguotiandian" },
        { name: "超市便利", icon: "icon-xueshengchaoshixiaofei" },
        { name: "生鲜果蔬", icon: "icon-shengxian-shucai" },
        { name: "滴团买药", icon: "icon-yao" },
      ],
      small_classify: [
        { name: "午餐", icon: "icon-wucan" },
        { name: "买酒", icon: "icon-jiu" },
        { name: "新鲜水果", icon: "icon--" },
        { name: "汉堡披萨", icon: "icon-hanbao" },
        { name: "休闲饮品", icon: "icon-yinpin" },
        { name: "夜宵", icon: "icon-_shaokao" },
        { name: "吐司", icon: "icon-tusi" },
        { name: "跑腿", icon: "icon-paotuiAPP" },
        { name: "美人佳丽", icon: "icon-huazhuangpin" },
        { name: "全部分类", icon: "icon-quanbufenlei" },
      ],
      centent_nav_list: [
        {
          tab: "天天神券",
          data: [
            {
              pic: "https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440",
              title: "鱼拿酸菜鱼(武汉江汉路店)",
              sales: "20",
              price: "20",
              label: ["门店上新", "38减3 | 49减12"],
              ico:'fire',
              top:'藏龙岛卤味熟食人气榜第一名'
            },
            {
              pic: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.cfcy168.com%2FUploadFiles%2F2020%2F2%2F15904074889874037.jpg&refer=http%3A%2F%2Fwww.cfcy168.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1645421933&t=66b58fbba9dce6f6b397e38820de24dc",
              title: "隆江猪脚饭",
              sales: "20.88",
              price: "20",
              label: ["38减3 | 49减12", "很下饭"],
              ico:'fire',
              top:'江夏区熟食人气榜第五名'
            },
            {
              pic: "https://img.zcool.cn/community/01c67960641eed11013fb1175b580c.jpg@1280w_1l_2o_100sh.jpg",
              title: "茶百道(湖北经济学院店)",
              sales: "19.99",
              price: "20",
              label: ["门店上新", "38减3 | 49减12"],
              ico:'fire',
              top:'江夏区奶茶人气榜第一名'
            },
            {
              pic: "https://tse4-mm.cn.bing.net/th/id/OIP-C.ZBaKV5J0Vq32slhmLiz7awHaFk?pid=ImgDet&rs=1",
              title: "KFC(东湖生态绿岛落雁岛店)",
              sales: "14.99",
              price: "20",
              label: ["门店上新", "很下饭"],
              ico:'fire',
              top:'江汉区汉堡人气榜第二名'
            },
            {
              pic: "https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440",
              title: "鱼拿酸菜鱼(武汉江汉路店)",
              sales: "10.99",
              price: "20",
              label: ["门店上新", "38减3 | 49减12"],
            },
            {
              pic: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.cfcy168.com%2FUploadFiles%2F2020%2F2%2F15904074889874037.jpg&refer=http%3A%2F%2Fwww.cfcy168.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1645421933&t=66b58fbba9dce6f6b397e38820de24dc",
              title: "隆江猪脚饭",
              sales: "9.9",
              price: "20",
              label: ["38减3 | 49减12", "很下饭"],
            },
            {
              pic: "https://img.zcool.cn/community/01c67960641eed11013fb1175b580c.jpg@1280w_1l_2o_100sh.jpg",
              title: "茶百道(湖北经济学院店)",
              sales: "5.9",
              price: "20",
              label: ["门店上新", "38减3 | 49减12"],
            },
            {
              pic: "https://tse4-mm.cn.bing.net/th/id/OIP-C.ZBaKV5J0Vq32slhmLiz7awHaFk?pid=ImgDet&rs=1",
              title: "KFC(东湖生态绿岛落雁岛店)",
              sales: "1.99",
              price: "20",
              label: ["门店上新", "很下饭"],
            },
          ],
        },
        {
          tab: "减配送费",
          data: [
            {
              pic: "https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440",
              title: "鱼拿酸菜鱼",
              sales: "2888",
              price: "20",
              label: ["门店上新", "38减3 | 49减12"],
            },
          ],
        },
        {
          tab: "点评高分",
          data: [
            {
              pic: "https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440",
              title: "鱼拿酸菜鱼",
              sales: "2888",
              price: "20",
              label: ["门店上新", "很下饭"],
            },
            {
              pic: "https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440",
              title: "鱼拿酸菜鱼",
              sales: "2888",
              price: "20",
              label: ["门店上新", "很下饭"],
            },
          ],
        },
        {
          tab: "会员满减",
          data: [
            {
              pic: "https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440",
              title: "鱼拿酸菜鱼",
              sales: "2888",
              price: "20",
              label: ["门店上新", "很下饭"],
            },
            {
              pic: "https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440",
              title: "鱼拿酸菜鱼",
              sales: "2888",
              price: "20",
              label: ["门店上新", "很下饭"],
            },
          ],
        },
      ],
    });
    return {
      ...toRefs(data),
      badgeVars,
      show,
      areaList,
    };
  },
};
</script>

<style lang="less" scoped>
/deep/ .van-tabs__wrap{
  border-radius: 10px;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
/deep/ .van-tabs__line{
  background-color:#ffc400;
}
.home {
  display: flex;
  flex-flow: column;
  height: 100%;
  background-color: #f2d26a;
  .content {
    flex: 1;
    overflow-y: auto;
    .header {
      background-image: linear-gradient(#ffc400, #f0d277);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 35px 10px 40px;

      .text {
        font-size: 20px;
        font-weight: 700;
      }
      .location {
        font-size: 16px;
        i {
          font-weight: 900;
          font-size: 20px;
        }
        span {
          margin: 0 5px;
        }
      }
    }
    .main {
      margin-top: -5px;
      background-color: #fff;
      border-radius: 25px 25px 0px 0px;
      .main-bg {
        background-color: #fff;
        padding: 5px 10px 0px 10px;
        border-radius: 25px 25px 0px 0px;
        .classify {
          padding: 20px 0;
          font-size: 10px;
          .small_classify {
            display: flex;
            flex-wrap: wrap;
            margin-top: 10px;
            div {
              display: flex;
              justify-content: center;
              flex-flow: column;
              align-items: center;
              width: 20%;
            }
            .icon {
              width: 30px;
              height: 30px;
              margin: 10px;
            }
          }
          .big_classify {
            font-size: 12px;
            display: flex;
            div:nth-child(1) > svg {
              background-image: linear-gradient(
                rgb(197, 12, 89),
                rgb(233, 16, 16)
              );
              border-radius: 200px 100px 20px 20px;
              padding: 5px;
            }
            div:nth-child(2) > svg {
              background-image: linear-gradient(
                rgb(210, 228, 20),
                rgb(233, 215, 10)
              );
              border-radius: 150px 100px 20px 20px;
              padding: 5px;
            }
            div:nth-child(3) > svg {
              background-image: linear-gradient(
                rgb(9, 161, 212),
                rgb(8, 122, 193)
              );
              border-radius: 150px 100px 20px 20px;
              padding: 5px;
            }
            div:nth-child(4) > svg {
              background-image: linear-gradient(
                rgb(8, 225, 84),
                rgb(6, 218, 49)
              );
              border-radius: 150px 100px 20px 20px;
              padding: 5px;
            }
            div:nth-child(5) > svg {
              background-image: linear-gradient(
                rgb(168, 8, 254),
                rgb(85, 7, 240)
              );
              border-radius: 150px 100px 20px 20px;
              padding: 5px;
            }
            div {
              flex: 1;
              display: flex;
              justify-content: center;
              flex-flow: wrap;
              align-items: center;
              .icon {
                width: 45px;
                height: 45px;
                margin-bottom: 5px;
              }
            }
          }
        }
        .search {
          .search_text {
            font-size: 11px;
            display: flex;
            justify-content: center;
            flex-flow: wrap;
            align-items: center;
            div {
              flex: auto;
              margin: 0 0px;
              padding: 2px 2px;
              background-color: #eee;
              border-radius: 20px;
            }
          }

          .van-search {
            margin-top: 0px;
            position: relative;
            border: none !important;
            div {
              background: #ffc400;
              padding: 0px 15px;
              border-radius: 20px;
              position: absolute;
              top: 11px;
              right: 12px;
            }
          }
        }
        .notice {
          border-radius: 10px;
          box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;

          .van-notice-bar {
            border-radius: 10px;
            height: 35px;
            .notice-swipe {
              color: black;
              height: 20px;
              line-height: 20px;
              font-size: 12px;
              span {
                color: #ffc400;
              }
            }
          }
        }
      }
      .van-tabs{
       border-radius: 10px;
       margin-top: 10px;
      }
    }
  }
}
</style>